<template>  
  <view class="box">  
    <view class="container">  
      <navigator url="">  
        <image src="../../../static/image/touxiang.png" alt="" class="touxiang" style="left: -20px;">  
      </navigator>  
      <view class="search-container">  
        <input class="search-input" type="text" placeholder="请输入搜索内容">  
		<view class="search-button">
			<uni-icons type="search" style="color: white" size="25"></uni-icons>
		</view>
      </view>  
    </view>  
	<!-- 轮播图 -->
    <uni-row style="top: -5px;">  
      <uni-col :span="24" >  
       <!-- <image src="../../../static/c1.png" alt="" class="tu"> -->
		<uni-swiper-dot :info="info" :current="current" field="content" mode="round">
			<swiper class="swiper-box" @change="change" :interval="3000" :autoplay="true">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="colcenter" >
						<!-- 通过 imgId 请求获取图片 URL -->
						<img class="tu" :src="`http://shuzisan.suguang.cc:8188/image/getImageById/${item.imgId}`" alt="image"  />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
      </uni-col>  
    </uni-row>  
 <!--   <view class="gonggao">  
      <view class="gaogong1">  
        <view class="gonggaoci">双色球</view>  
        <image src="../../../static/image/gonggao.png" alt="" class="gonggao2">  
      </view>  
    </view>  -->
    <uni-row style="top: 20px;">  
      <uni-col :span="5" class="colcenter">  
        <view class="circle colcenter">  
          <image src="../../../static/image/qiche.png"  @click="tokj" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="5" class="colcenter">  
        <view class="circle2 colcenter" @click="TDRecommend">  
          <image src="../../../static/image/damuzhi.png" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="4" class="colcenter">  
        <view class="circle3 colcenter"  @click="to3d">  
          <image src="../../../static/image/rili.png" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="5" class="colcenter">  
        <view class="circle4 colcenter">  
          <image src="../../../static/image/paixu.png"  @click="sdpx" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="5" class="colcenter">  
        <view class="circle5 colcenter" @click="sdjl">  
          <image src="../../../static/image/jielong.png" alt="" class="tu1">  
        </view>  
      </uni-col>  
    </uni-row>  
    <uni-row style="top: 20px;">  
      <uni-col :span="5" class="colcenter">开奖号码</uni-col>  
      <uni-col :span="5" class="colcenter">3D推荐</uni-col>  
      <uni-col :span="4" class="colcenter">3D软件</uni-col>  
      <uni-col :span="5" class="colcenter">3D排序</uni-col>  
      <uni-col :span="5" class="colcenter">3D接龙</uni-col>  
    </uni-row>  
    <uni-row style="top: 25px;">  
      <uni-col :span="5" class="colcenter">  
        <view class="circle6 colcenter" @click="topwa3">  
          <image src="../../../static/image/5.png" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="5" class="colcenter">  
        <view class="circle7 colcenter" @click="psRecommend">  
          <image src="../../../static/image/xiangshang.png" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="4" class="colcenter">  
        <view class="circle8 colcenter" @click="ps">  
          <image src="../../../static/image/xiangshang.png" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="5" class="colcenter">  
        <view class="circle9 colcenter">  
          <image src="../../../static/image/ceju.png" @click="plwpx" alt="" class="tu1">  
        </view>  
      </uni-col>  
      <uni-col :span="5" class="colcenter">  
        <view class="circle10 colcenter"  @click="plwjl">  
          <image src="../../../static/image/bofang.png" alt="" class="tu1">  
        </view>  
      </uni-col>  
    </uni-row>  
    <uni-row style="top: 25px;">  
      <uni-col :span="5" class="colcenter">排五后三</uni-col>  
      <uni-col :span="5" class="colcenter">排三推荐</uni-col>  
      <uni-col :span="4" class="colcenter">排三软件</uni-col>  
      <uni-col :span="5" class="colcenter">排三排序</uni-col>  
      <uni-col :span="5" class="colcenter">排三接龙</uni-col>  
    </uni-row>  
    <view class="fucai3d">  
      <!--  福彩3D部分 排三 -->  
      <view  >  
	  <uni-row  style="top: 6px;margin-left: 10px;">
	  	<uni-col  class="underline-text"  :span="12"  >
			<view @click="todayData(1)">3D开奖推荐用户中奖</view>
		</uni-col>  
	  	<uni-col class="underline-text"  :span="12"  >
			<view @click="todayData(0)">排3开奖推荐用户中奖</view>
		</uni-col>  
	  </uni-row>
        <uni-row  style="top: 16px;;margin-left: 10px;">  
          <uni-col :span="12">  
            <view class="zi">{{lotteryName}}</view>  
          </uni-col >  
		  <uni-col :span="12">
				<text  class="zi"  >{{projectName}}</text>
		  </uni-col>
        </uni-row>
		<view  class="uni-container" v-show="!todayDataStatus">
			<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" >
				<uni-tr>
					<uni-th	align="center"   >序号</uni-th>
					<uni-th	align="center"  >用户名称</uni-th>
					<uni-th	align="center"  >项目名称</uni-th>
					<uni-th	align="center"  >期号</uni-th>
					<uni-th	align="center"  >操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ index+1 }}</uni-td>
					<uni-td align="center">{{ item.userName }}</uni-td>
					<uni-td align="center">{{ projectName }}</uni-td>
					<uni-td align="center">{{ item.lotteryNo }}</uni-td>
					<uni-td align="center"> 
						<view  style="color: blue;"  @tap="redirectToDetail(item.phoneNumber)">  
							查看
						</view> 
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<!-- 当日中奖情况 -->
		<view  class="uni-container" v-show="todayDataStatus">
			<uni-table ref="table" :loading="loading" border stripe  emptyText="暂无更多数据" >
				<uni-tr>
					<uni-th	align="center"   >序号</uni-th>
					<uni-th	align="center"  >用户名称</uni-th>
					<uni-th	align="center"  >项目名称</uni-th>
					<uni-th	align="center"  >期号</uni-th>
					<uni-th	align="center"  >操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ index+1 }}</uni-td>
					<uni-td align="center">{{ item.userName }}</uni-td>
					<uni-td align="center">{{ projectName }}</uni-td>
					<uni-td align="center">{{ item.lotteryNo }}</uni-td>
					<uni-td align="center"> 
						<view  style="color: red;"  @tap="redirectToDetail(item.phoneNumber)">  
							中奖
						</view> 
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
      </view>  
    </view>  
    <!-- 弹窗内容 -->  
    <view class="popup" v-if="popupVisible">  
      <!-- 弹窗内部内容 -->  
      <view class="popup-content">  
		<view>当前经验值：{{experience}}   正确率：{{accuracy}}%</view>
		<view style="color: red;">提示：每行排除3个号码后提交 </view>
        <scroll-view class="combinatorialArray" scroll-x="true">  
          <view>  
            <uni-row class="demo-uni-row1">  
              <uni-col :span="3" :pull="1"></uni-col>  
              <uni-col :span="19" :pull="2" style="top: -5px;">  
                <uni-data-checkbox mode="tag" multiple v-model="checkbox"  
                  :localdata="hobbies"  ></uni-data-checkbox>  
              </uni-col>  
            </uni-row>  
            <uni-row class="demo-uni-row1">  
              <uni-col :span="3" :pull="1"></uni-col>  
              <uni-col :span="19" :pull="2" style="top: -5px;">  
                <uni-data-checkbox mode="tag" multiple v-model="checkbox1"  
                  :localdata="hobbies"  ></uni-data-checkbox>  
              </uni-col>  
            </uni-row>  
            <uni-row class="demo-uni-row1">  
              <uni-col :span="3" :pull="1"></uni-col>  
              <uni-col :span="19" :pull="2" style="top: -5px;">  
                <uni-data-checkbox mode="tag" multiple v-model="checkbox2"  
                  :localdata="hobbies"  ></uni-data-checkbox>  
              </uni-col>  
            </uni-row>  
          </view>  
        </scroll-view>  
        <button class="ti" @click.stop="generateCombinations">提交</button>  
      </view>  
    </view>  
	<view>
		 <uni-popup ref="alertDialog" background-color="#fff" type="bottom">
				<uni-row class="demo-uni-row" style="margin-bottom: 15px" :gutter="26" v-for="(item, index) in projectNames">
					<uni-col :span="8" v-for="(val, i) in item.projectName" :key="i">
						<button style="font-size: 10px	;" class="buttonNoActive01" @click="selectProjectName(val.name, val.id)" >
							<text class="buttontext">{{ val.name }}</text>
						</button>
					</uni-col>
				</uni-row>
		 </uni-popup>
	</view>
  </view>  
</template>  

<script>  
export default {  
  data() {  
    const options = Array.from({ length: 10 }, (_, i) => ({ text: `${i}`, value: i }));  
    return {
		info: [],
		current: 0,
		tableData:[],
		loading:false,
	  lotteryName:"排三专家推荐",
      scrollTop: 0, // 滚动条位置  
	   projectName: '五码胆出123',
	  projectNameIndex:"11", // 选项名称
	  lotteryTypeIndex:0, // 彩票类型
	  lotteryNo:0,
	  projectNames: [
	  		{
	  			projectName:[{name:"大底700+",id:"1"},{name:"五码胆出123",id:"11"},{name:"百十差排除3个号码",id:"21"},]
	  		},
	  		{
	  			projectName:[{name:"大底600+",id:"2"},{name:"四码胆出123",id:"12"},{name:"百个差排除3个号码",id:"22"},]
	  		},
	  		{
	  			projectName:[{name:"大底500+",id:"3"},{name:"三码胆出123",id:"13"},{name:"十个差排除3个号码",id:"23"},]
	  		},
	  		{
	  			projectName:[{name:"大底400+",id:"4"},{name:"任意7码出23",id:"14"},{name:"百十和排除3个号码",id:"24"},]
	  		},
	  		{
	  			projectName:[{name:"大底300+",id:"5"},{name:"百位排除3码",id:"15"},{name:"百个和排除3个号码",id:"25"},]
	  		},
	  		{
	  			projectName:[{name:"大底200+",id:"6"},{name:"十位排除3码",id:"16"},{name:"十个和排除3个号码",id:"26"},]
	  		},
	  		{
	  			projectName:[{name:"大底100+",id:"7"},{name:"个位排除3码",id:"17"},{name:"任意选3个差",id:"27"},]
	  		},
	  		{
	  			projectName:[{name:"精选50注",id:"8"},{name:"排除3个和尾",id:"18"},{name:"任意选3个和",id:"28"},]
	  		},
	  		{
	  			projectName:[{name:"精选10注",id:"9"},{name:"排除6个两码",id:"19"},{name:"百十个排除2x2x2",id:"29"},]
	  		},
	  		{
	  			projectName:[{name:"排除任意2个号码",id:"20"}]
	  		}
	  ],
      hobbies: options,  
      // 默认全选  
      checkbox: options.map(o => o.value),  
      checkbox1: options.map(o => o.value),  
      checkbox2: options.map(o => o.value),  
      combinations1: [],  
      combinations2: [],  
      combinations3: [],  
      popupVisible: false, // 控制弹窗显示状态  
      lastSubmitTime: null, // 用于存储上次提交日期 
	  experience:0, // 经验值
	  accuracy:0, //  正确率
	  todayDataStatus:true

    };  
  },  
  onShow() {  
	  
	this.getImgList();
    //this.checkLastSubmit(); // 页面加载时检查上次提交的日期  
	this.getLastLotteryNo(); // 查询数据
	this.getMyExperience();// 获取个人经验值
  },  
  methods: {
	  // 查看当期中奖用户
	  todayData(lotteryTypeIndex){
		  this.todayDataStatus = true
		  //type 为彩票类型 0为排三 1为3D
		  this.$myRequest({
		    	method: 'get',
		    	url: '/submit/getSubmitRecordByTypeAndToday',
		    	data: {'lotteryTypeIndex':lotteryTypeIndex,
		  			'projectNameIndex':this.projectNameIndex,
		  			'lotteryNo':this.lotteryNo-1}
		    }).then((res) => {
		  	  if(res.flag){
		  		   this.tableData = res.data
		  	  }
		  })
	  },
	  getImgList(){
		  this.$myRequest({
		    	method: 'get',
		    	url: '/imageSorting/getImageSortingList',
		    }).then((res) => {
				if (res.flag ) {
					// 假设返回的数据是一个数组，包含 imgId 字段
				    this.info = res.data;
					// 获取每个 imgId 对应的图片 URL
					//this.fetchImageUrls();
				}
		  })
	  },
	   // 根据 imgId 获取图片的 URL
    fetchImageUrls() {
      this.info.forEach((item, index) => {
        // 假设 imgId 是图片的唯一标识符，根据 imgId 请求图片 URL
        this.$myRequest({
          method: 'get',
          url: '/image/getImageUrl',
          data: { imgId: item.imgId },
        }).then((res) => {
          if (res.code === 200) {
            // 将返回的图片 URL 添加到 item 中
            this.$set(this.info, index, { ...item, imageUrl: res.data.imageUrl });
          }
        });
      });
    },

	  change(e) {
	  			this.current = e.detail.current;
	  		},
	  tokj(){
		  uni.navigateTo({
		    url: '/pages/lottery/kj/index'
		  });
	  },
	  sdjl(){
		  this.jl("fcsd")
	  },
	  plwjl(){
	  		  this.jl("plw")
	  },
	  jl(type){ //3d接龙
		  uni.navigateTo({
		    url: '/pages/lottery/jl/index?type='+type
		  });
	  },
	  sdpx(){
	  		  this.px("fcsd")
	  },
	  plwpx(){
	  		  this.px("plw")
	  },
	  px(type){ //3d接龙
	  		  uni.navigateTo({
	  		    url: '/pages/lottery/px/index?type='+type
	  		  });
	  },
	  getMyExperience(){ // 获取我的经验值
		  this.$myRequest({
		    	method: 'get',
		    	url: '/submit/getMyExperience',
		    //	data: {type:'plw'}
		    }).then((res) => {
		  	  if(res.flag){
		  		let flag1 = Number(res.data.flag1)  
		  		let count = Number(res.data.count)  
				this.experience = flag1*10
				this.accuracy = ((flag1/count)*100).toFixed(2) 
		  	  }
		  })
	  },
	  selectProjectName(name,index) { // 选择项目名称
		  this.projectNameIndex = index
		  this.projectName = name; 
		  this.getSubmitRecordByType()
	  	this.$refs.alertDialog.close()
	  },  
	  openProjectName(){
		  this.$refs.alertDialog.open()
	  },
	  getProjectNameByIndex(index){
	  	let name = ""
	  	this.projectNames.forEach(item =>{
	  		item.projectName.forEach(obj => {
	  			if(index == obj.id ){
	  				name = obj.name
	  				return 
	  			}
	  		})
	  	})
	  	return name
	  },
	 //  selectProjectName(event) { // 选择项目名称
	 //  	this.projectNameIndex =  event.detail.value
	 //  	this.projectName = this.projectNames[this.projectNameIndex]; 
		// this.getSubmitRecordByType()
	 //  },  
    redirectToDetail(phoneNumber) {
      uni.navigateTo({  
        url: `/pages/lottery/index/myrecord?phoneNumber=${phoneNumber}&projectNameIndex=${this.projectNameIndex}&lotteryTypeIndex=${this.lotteryTypeIndex}&projectName=${this.projectName}&lotteryNo=${this.lotteryNo}`  
      });  
    },  
    psRecommend() {  
		this.todayDataStatus = false
       this.lotteryName = "排三专家推荐"
	   this.lotteryTypeIndex = 0
	   this.getSubmitRecordByType();
	   this.openProjectName()
	   
    },  
    TDRecommend() {  
		this.todayDataStatus = false
      this.lotteryName = "3D专家推荐"
	  this.lotteryTypeIndex = 1
	  this.getSubmitRecordByType();
	  this.openProjectName()
    },  
	getLastLotteryNo(){ // 获取最新期号
		  this.$myRequest({
			method: 'get',
			url: '/getLastLotteryNo',
			data: {type:'plw'}
		  }).then((res) => {
			  if(res.flag){
				   this.lotteryNo = Number(res.data)+1
				   this.getSubmitRecordByType() // 获取数据
			  }
		})
	},
	getSubmitRecordByType(){
		this.todayDataStatus = false
		//type 为彩票类型 0为排三 1为3D
		this.$myRequest({
		  	method: 'get',
		  	url: '/submit/getSubmitRecordByType',
		  	data: {'lotteryTypeIndex':this.lotteryTypeIndex,
					'projectNameIndex':this.projectNameIndex,
					'lotteryNo':this.lotteryNo}
		  }).then((res) => {
			  if(res.flag){
				   this.tableData = res.data
				   if(res.data.length==0){
					   this.todayData(this.lotteryTypeIndex)
				   }
			  }
		})
	},
	topwa3(){
		 this.toURL('排5后3','plwa3')
	},
	to3d(){
	  this.toURL('3D软件','fcsd')
	},
    ps() {  
       this.toURL('排三软件','plw')
    }, 
	toURL(name,type){
		uni.navigateTo({
		  url: '/pages/lottery/software/luckyLottery?name='+name+'&type='+type
		}); 
	},
    checkLastSubmit() {  
      const storedDate = uni.getStorageSync(uni.getStorageSync("phone")); // 获取存储日期  
      const currentDate = new Date().toISOString().split('T')[0]; // 获取当前日期  
      if (storedDate !== currentDate) {  
        this.popupVisible = true; // 如果不是当天，显示弹窗  
      }  
    },  

    // checkSelection(selected, rowName) {  
    //   if (selected.length > 7) { // 如果选择数量超过 7 个，移除最后一个选择  
    //     selected.pop();  
    //     this.showAlert(`${rowName} 只能选择 7 个数`);  
    //   } else if (selected.length < 7) {  
    //     this.showAlert(`${rowName} 必须选择 7 个数`);  
    //   }  
    // },  

    showAlert(message) { // 提示信息  
      uni.showToast({  
        title: message,  
        icon: 'none',  
      });  
    },  

	generateCombinations() {  
		if (this.checkbox.length !== 7 || this.checkbox1.length !== 7 || this.checkbox2.length !== 7) {  
			this.showAlert('百十个位每行必须选择7位数字！');  
			return;  
		}  
		const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];  
		// this.combinations1 = this.generateCombinationsForOneArray(this.checkbox, arr, arr);  
		// this.combinations2 = this.generateCombinationsForOneArray(arr, this.checkbox1, arr);  
		// this.combinations3 = this.generateCombinationsForOneArray(arr, arr, this.checkbox2);  
		// 将组合结果转换为字符串  
		// const result = {  
		// 	hundredsCombinations: this.combinations1,  
		// 	tensCombinations: this.combinations2,  
		// 	unitsCombinations: this.combinations3,  
		// };  
		const result =  this.generateCombinationsForOneArray(this.checkbox, this.checkbox1, this.checkbox2);  
		// 构建提交数据对象  
		const data = { 
			deviceId: uni.getStorageSync("phone"), // 请替换为实际的手机号码  
			result: JSON.stringify(result), // 将结果转换为字符串  
		};  
		// 调用发送请求的方法  
		this.$myRequest({
			method: 'post',
			url: '/saveMyRecord',
			data: data
		  }).then((res) => {
			  if(res.flag){
				  // 提交成功逻辑
				  const currentDate = new Date().toISOString().split('T')[0]; // 获取当前日期  
				  uni.setStorageSync(uni.getStorageSync("phone"), currentDate); // 存储当前日期  
				  this.popupVisible = false; // 关闭弹窗  
				  // 提示提交成功  
				  uni.showToast({  
				      title: '提交成功',  
				      icon: 'success',  
				  });  
			  }
		})
	}, 
    generateCombinationsForOneArray(arr1, arr2, arr3) {  
      return arr1.flatMap(i =>  
        arr2.flatMap(j =>  
          arr3.map(k => `${i}${j}${k}`)  
        )  
      );  
    }  
  },  
};  
</script>   

<style lang="scss">
	.box{
		//background-color: #f6eee8;
	}
.underline-text {
  text-decoration: underline;
  font-size: 16px;
  color: #742305;
}
	.cell01 {
		flex: 100%;
		text-align: center;
		height: 10px;
		font-size: 10px;
		padding: 10px;
		// border: 1px solid #ccc;
	
	}

	.cell {
		flex: 1;
		text-align: center;
		height: 10px;
		font-size: 10px;
		padding: 10px;
		// border: 1px solid #ccc;
		
	}

	.combinatorialArray1 {
		width: 100%;
		height: 400px;
		background-color: #00C294;
	}

	.ti {
		width: 100px;
		top: 6px;
	}

	.demo-uni-row1 {
		width: 550px;
		margin-top: 30rpx;
		display: flex;
	}

	.da {
		width: 100%;
		border: 1px solid gainsboro;
		display: flex;
		justify-content: center;
		/* 列内水平居中 */
		align-items: center;
		/* 列内垂直居中 */
		height: 420px;
		/* 确保列高度100% */
		
	}

	/* 样式可以根据实际需求进行调整 */
	.popup {
		z-index: 100;
		/* 设置一个较高的层级 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(226, 226, 226, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		width: 100%;
		height: 250px;
		background-color: #ffffff;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
	}

	.sizhong {
		background-color: gainsboro;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 60px;
		/* 按钮宽度 */
		height: 20px;
		/* 按钮高度 */
		border: 1px solid #ccc;
		/* 边框样式 */
		border-radius: 30px;
		/* 圆角 */
		font-size: 12px;
		/* 字体大小 */
		color: #333;
		/* 文字颜色 */
		text-align: center;
		/* 文字水平居中 */
		color: black;
		/* 初始字体颜色 */
	}

	.yibai {
		background-color: gainsboro;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 40px;
		/* 按钮宽度 */
		height: 20px;
		/* 按钮高度 */
		border: 1px solid #ccc;
		/* 边框样式 */
		border-radius: 30px;
		/* 圆角 */
		font-size: 12px;
		/* 字体大小 */
		color: #333;
		/* 文字颜色 */

		color: black;
		/* 初始字体颜色 */
	}

	.lianzhong {
		background-color: gainsboro;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 50px;
		/* 按钮宽度 */
		height: 20px;
		/* 按钮高度 */
		border: 1px solid #ccc;
		/* 边框样式 */
		border-radius: 30px;
		/* 圆角 */
		font-size: 12px;
		/* 字体大小 */
		color: #333;
		/* 文字颜色 */
		text-align: center;
		/* 文字水平居中 */
		color: black;
		/* 初始字体颜色 */
	}

	.qizhongqi {
		background-color: gainsboro;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 60px;
		/* 按钮宽度 */
		height: 20px;
		/* 按钮高度 */
		border: 1px solid #ccc;
		/* 边框样式 */
		border-radius: 30px;
		/* 圆角 */
		font-size: 12px;
		/* 字体大小 */
		color: #333;
		/* 文字颜色 */
		text-align: center;
		/* 文字水平居中 */
		color: black;
		/* 初始字体颜色 */
	}

	.dudan {
		width: 70px;
		height: 1px;
		background-color: #e6e6e6;
		border: none;
		/* 可选，如果不需要边框的话 */
		border-radius: 25%;
		/* 边框变为圆形 */
		padding: 10px;
		/* 调整内边距 */
		text-align: center;
		/* 将文字居中对齐 */
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		font-size: 10px;
		position: relative;
		top: 6px;
		left: 10px;
	}

	.qizhong {
		width: 50px;
		height: 1px;
		background-color: #e6e6e6;
		border: none;
		/* 可选，如果不需要边框的话 */
		border-radius: 25%;
		/* 边框变为圆形 */
		padding: 10px;
		/* 调整内边距 */
		text-align: center;
		/* 将文字居中对齐 */
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		font-size: 10px;
		position: relative;
		top: -1px;
		left: 50px;
	}

	.qi {
		width: 30px;
		height: 1px;
		background-color: #e6e6e6;
		border: none;
		/* 可选，如果不需要边框的话 */
		border-radius: 25%;
		/* 边框变为圆形 */
		padding: 10px;
		/* 调整内边距 */
		text-align: center;
		/* 将文字居中对齐 */
		display: flex;
		/* 使用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		font-size: 10px;
		position: relative;
		top: 20px;
	}

	.mingcheng {
		position: relative;
		top: 20px;
		font-size: 10px;
	}

	.nvtouxiang {
		width: 45px;
		height: 45px;
		left: -5px;
		top: 25px;
	}

	.xiangshang {
		width: 20px;
		height: 20px;
		left: 60px;
		top: -5px;
		top: -20px;
	}
	.colcenter {
		display: flex;
		justify-content: center;
		/* 列内水平居中 */
		align-items: center;
		/* 列内垂直居中 */
		height: 100%;
		/* 确保列高度100% */
	}
	.zi {
		color: #742305;
		font-size: 18px;

	}
	.fucai3d {
		width: 100%;
		position: relative;
		top: 35px;
		border: 1px solid #cccccc;
	}

	.fucai {
		width: 400px;
		height: 15px;
		background-color: #e6e6e6;
		position: relative;
		left: -5px;
		top: 35px;

	}

	.tu1 {
		width: 30px;
		height: 30px;
	}

	.gonggao {
		height: 30px;
		background-color: #e6e6e6;
		position: relative;
		top: 10px;
	}

	.gaogong1 {
		color: #cc0808;
		width: 40px;
		height: 20px;
		position: relative;
		left: 40px;
		top: 5px;
		font-size: 10px
	}

	.gonggao2 {
		position: relative;
		width: 20px;
		height: 20px;
		top: -21px;
	}

	.gonggaoci {
		position: relative;
		left: 50px;
	}

	.circle {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #0DC52C;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle2 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #646FE2;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle3 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #FDD155;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle4 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #FE8533;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle5 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #1E90E9;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle6 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #00C294;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle7 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #F9A949;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle8 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #0DC52C;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle9 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #855EDB;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.circle10 {
		width: 45px;
		/* 设置圆形视图的宽度 */
		height: 45px;
		/* 设置圆形视图的高度 */
		background-color: #FA5D59;
		/* 绿色背景 */
		border-radius: 50%;
		/* 将视图的边框半径设置为视图宽度的一半，实现圆形效果 */

	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50pxpx;

	}

	.search-container {
		display: flex;
		align-items: center;
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 8px;
		width: 250px;
		height: 20px;

	}

	.search-input {
		flex: 1;
		border: none;
		padding: 6px;
		outline: none;
		font-size: 16px;
	}

	.search-button {
		background-color: #742305;
		color: white;
		border: none;
		padding: 8px 16px;
		cursor: pointer;
		border-radius: 4px;
		line-height: 100%;
		height: 80%
	}

	.touxiang {
		width: 30px;
		height: 30px;
		;
	}

	.tu {
		width: 90%;
		height: 130px;
		border: 1px solid #ccc;
		border-radius: 20px;
		position: relative;
		top: 10px;
	}
	.uni-container{
		padding-top: 20px;
		height: 400px; /* 根据需要设置容器高度 */
		overflow-y: auto; /* 启用垂直滚动 */
		
	}
	/deep/ .uni-table {
			 min-width: 100%!important;
	}
</style>